<template>
	<view
		:class="['zjy-button', `color-${color}`, `size-${size}`, { disabled }, `type-${type}`]"
		:style="{
			width: width ? width + 'rpx' : '100%',
			paddingLeft: pd ? pd + 'rpx' : '',
			paddingRight: pd ? pd + 'rpx' : '',
		}"
		@click.stop="handleClick"
	>
		<slot></slot>
	</view>
</template>

<script setup lang="ts">
import { debounce } from "@/utils/debounce" // 确保路径正确

interface ZjyButtonProps {
	width?: string
	pd: string | number
	color: string
	size: string
	disabled: boolean
	type: string //secondary line
}

const props = defineProps<ZjyButtonProps>()

const emit = defineEmits(["click"])

const handleClick = debounce(() => {
	if (!props.disabled) {
		emit("click")
	}
}, 200)
</script>

<style scoped lang="scss">
.zjy-button {
	height: 80rpx;
	line-height: 80rpx;
	font-size: 28rpx;
	font-weight: 500;
	text-align: center;
	color: $black-1d;
	background: $c-theme;
	border-radius: 64rpx;

	&.disabled {
		background: $c-grey-e5;
		color: $c-grey-86;
	}

	&.size-small {
		min-width: unset;
		height: 64rpx;
		line-height: 64rpx;
		font-size: 24rpx;
		padding: 0 40rpx;
	}

	&.size-medium {
		min-width: unset !important;
		height: 72rpx;
		line-height: 72rpx;
		font-size: 28rpx;
		padding: 0 30rpx;
	}

	&.size-lg {
		min-width: unset !important;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		padding: 0 30rpx;
	}

	&.size-mini {
		min-width: unset !important;
		height: 48rpx;
		line-height: 48rpx;
		font-size: 24rpx;
		font-weight: normal;
		padding: 0 20rpx;
		width: auto !important;
	}

	&.type-secondary {
		background: rgba(34, 181, 115, 0.08);
		color: $c-black-1d;
	}

	&.type-line {
		background: $c-white;
		color: $c-black-1d;
		border: 1rpx solid #c9cdd4;
		transform: rotate(360deg);
	}
}
</style>
